<script setup lang="ts">
import * as echarts from 'echarts'
import { nextTick, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import requests from '../util/fetchUtils'
const router = useRouter()
var option = {
tooltip: {
show: true,
trigger: "axis"
},
xAxis: {
type: 'time',
axisLabel: {
show: true,
color: "rgba(255, 255, 255, 0.6)"
},
interval: 24 * 60 * 60 * 1000
},
grid: {
containLabel: true,
top: '8%',
bottom: 0,
left: 0,
right: 5
},
yAxis: {
type: 'value',
min: 390,
axisLabel: {
show: true,
color: "rgba(255, 255, 255, 0.6)"
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255, 255, 255, 0.08)"
}
}
},
series: [
{
data: [
[new Date(2023, 8, 13), 390.5627],
[new Date(2023, 8, 14), 390.6627],
[new Date(2023, 8, 15), 390.7627],
[new Date(2023, 8, 16), 390.6627],
[new Date(2023, 8, 17), 390.6627],
[new Date(2023, 8, 18), 390.7627],
[new Date(2023, 8, 19), 390.8627],
[new Date(2023, 8, 20), 390.9627],
[new Date(2023, 8, 21), 390.5627]
],
type: 'line'
}
]
}
const sortFollowersDescending = (data: Array<any>) => {
return data.sort((a, b) => a.follower - b.follower);
}
const init = () => {
var chartDom = document.getElementById('chart-main')
var myChart = echarts.init(chartDom)
//请求数据
let follower = requests<any>("/getWeekFollower/900171")
follower.then(data => {
let result = data.map((item: { data_time: string | number | Date;
follower: any }) => {
let date = new Date(item.data_time)
return [date, item.follower]
})
console.log(sortFollowersDescending(data)[0].follower);
option.yAxis.min=sortFollowersDescending(data)[0].follower
if (Array.isArray(option.series)) {
option.series[0].data = result
}
myChart.setOption(option)
})
option && myChart.setOption(option)
window.onresize = function () {
myChart.resize()
}
}
const fansRank = (id: number) => {
console.log(id)
// 并且携带店铺ID
router.push({
path: "/fans",
query: {
id: id
}
})
}
const totalFans = (id: number) => {
console.log(id)
// 并且携带店铺ID
router.push({
path: "/tfans",
query: {
id: id
}
})
}
onMounted(() => {
nextTick(() => {
init()
})
})
const MonthData =()=>{
var chartDom = document.getElementById('chart-main')
var myChart = echarts.init(chartDom)
//请求数据
let follower = requests<any>("/getWeekFollower/492840942")
follower.then(data => {
let result = data.map((item: { data_time: string | number | Date;
follower: any }) => {
let date = new Date(item.data_time)
return [date, item.follower]
})
option.yAxis.min=sortFollowersDescending(data)[0].follower
if (Array.isArray(option.series)) {
option.series[0].data = result
}
myChart.setOption(option)
})
}
</script>
<template>
<div class="index">
<div class="container top">
<img class="myzone" src="../assets/img/ico_ico_home_myzone.png" alt=""
srcset="">
<div class="title">
全部站点数据
<img src="../assets/img/ico_ico_home_add.png" alt="" srcset="">
</div>
<img class="site" src="../assets/img/ico_ico_home_site.png" alt=""
srcset="">
</div>
<div class="container">
<div class="navigation">
<div class="item" @click="fansRank(1)">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" @click="totalFans(1)"
src="../assets/img/icon_ranking.png" alt="" srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
</div>
<div class="navigation">
<div class="item" @click="fansRank(1)">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
</div>
<div class="navigation">
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
</div>
<div class="navigation">
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
<div class="item">
<img class="icon" src="../assets/img/icon_ranking.png" alt=""
srcset="">
<div class="text">粉丝排名</div>
</div>
</div>
</div>
<div class="img-title">
<div class="text">粉丝变化情况</div>
</div>
<div class="container">
<div class="fans-condition">
<div class="text-button">
<div class="item active">涨粉最快</div>
<div class="item">跌粉最快</div>
</div>
<div class="up-box">
<img class="face"
src="https://i1.hdslb.com/bfs/face/ae16880a3ccba26a2461a04b31ab7f98061cc576.jpg"
referrerPolicy="no-referrer" crossorigin="anonymous" alt="">
<div class="up-name">★⑥檤轮囬★</div>
</div>
<div id="chart-main" style="width: 9.4667rem;height:4.2667rem; margin: 0
auto;">
</div>
<div class="date-nav">
<div class="item active">近7天</div>
<div class="item">近15天</div>
<div class="item" @click="MonthData()">近1个月</div>
<div class="item">近3个月</div>
</div>
</div>
</div>
</div>
</template>
<style lang="less">
@import url(../assets/css/base.less);
.index {
width: 10rem;
margin: 0 auto;
.top {
display: flex;
align-items: center;
padding-bottom: .5333rem;
img {
display: block;
width: .8rem;
height: .8rem;
}
.myzone {
margin-left: .5333rem;
margin-right: .2133rem;
}
.title {
width: 6.9333rem;
height: 1.1733rem;
display: flex;
align-items: center;
justify-content: flex-end;
color: @heading-color;
font-size: .48rem;
background-image: url(../assets/img/img_titlebar_home.png);
background-repeat: no-repeat;
background-size: 100% 100%;
img {
margin-left: 1.1467rem;
margin-right: .1067rem;
}
}
.site {
margin-left: .1867rem;
}
}
.navigation {
width: 8.7467rem;
margin-left: auto;
margin-right: auto;
padding-bottom: .5333rem;
display: flex;
flex-wrap: wrap;
.item {
width: 1.28rem;
display: flex;
flex-direction: column;
align-items: center;
.icon {
display: block;
width: 1.2rem;
height: 1.2rem;
}
.text {
font-size: .32rem;
color: rgba(255, 255, 255, 1);
text-align: center;
margin-top: .2133rem;
}
&:not(:first-child) {
margin-left: .5867rem;
}
}
}
.img-title {
width: 10rem;
height: 1.0667rem;
background: url(../assets/img/img_title_normal.png) no-repeat;
background-size: contain;
margin-top: .2667rem;
.text {
font-size: .3733rem;
color: white;
margin-left: .7467rem;
height: 1.0667rem;
line-height: 1.0667rem;
}
}
.text-button {
display: flex;
margin-left: .2667rem;
padding-top: .5333rem;
.item {
width: 1.7067rem;
height: .64rem;
background: linear-gradient(135deg, rgba(0, 36, 72, 1) 0.01%, rgba(13, 73,
133, 1) 50.37%, rgba(0, 36, 72, 1) 100%);
box-shadow: inset 0px -0.0133rem 0px rgba(75, 194, 255, 0.5), inset 0px
.0133rem 0px rgba(75, 194, 255, 0.5), inset -0.0133rem 0px 0px rgba(75, 194, 255,
0.5), inset 0px 0px .16rem rgba(255, 255, 255, 0.6);
/** 文本1 */
font-size: .32rem;
line-height: .64rem;
color: rgba(255, 255, 255, 0.8);
text-align: center;
&.active {
background: linear-gradient(135deg, rgba(15, 99, 184, 1) 0.01%, rgba(27,
160, 228, 1) 50.37%, rgba(15, 99, 184, 1) 100%);
box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.8);
}
}
}
.up-box {
display: flex;
margin-left: .5333rem;
margin-top: .2667rem;
margin-bottom: .2667rem;
.face {
display: block;
width: .8rem;
height: .8rem;
border-radius: 50%;
border: 0.5px solid @heading-color;
margin-right: .2667rem;
}
.up-name {
font-size: .4267rem;
line-height: .8rem;
text-align: center;
}
}
.date-nav {
display: flex;
margin-top: .5333rem;
padding-bottom: .6133rem;
justify-content: center;
.item {
font-size: .32rem;
height: .64rem;
background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(22, 41,
86, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
border: .0133rem solid rgba(75, 194, 255, 0.2);
box-shadow: inset 0px 0px .16rem rgba(75, 194, 255, 0.3);
line-height: .64rem;
padding-left: .2667rem;
padding-right: .2667rem;
&:not(:last-child) {
margin-right: .5333rem;
}
&.active {
background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(37,
68, 137, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
border: .0133rem solid rgba(75, 194, 255, 0.6);
}
}
}
}
</style>